<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>读者管理</title>
		<link rel="icon" href="images/icon.gif" type="image/x-ico">
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
		<link href="css/style.css" rel='stylesheet' type='text/css'/>
		<link rel="stylesheet" href="css/nav.css">
		<link rel="stylesheet" href="iocnfont/iconfont.css">
		<link rel="stylesheet" href="css/gototop.css">
		<%--<link rel="stylesheet" href="bootstrap-4.2.1/css/bootstrap.min.css">--%>
		<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
			  rel="stylesheet"/>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="bootstrap-4.2.1/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
		<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
		<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
		<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
		<style>
            .agm {
                background: url(images/admin2.jpg);
                background-repeat: no-repeat;
                background-size: 100%;
            }
		</style>
		<script>
            $(function () {

                //日历的控件
                $(".time").datetimepicker({
                    minView: "month",
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                });

                pageList(1, 2);

                //为查询按钮绑定事件
                $("#searchBtn").click(function () {
                    /*
                    	点击查询按钮的时候,我们应该将搜索框中的信息保存起来,保存到隐藏域中
                     */
                    $("#hidden-readerUserName").val($.trim($("#readerUserName").val()));
                    pageList(1, 2);
                    //然后将搜索框中的数据清空
                    $("#readerUserName").val("");
                })

                //为全选复选框绑定事件
                $("#qx").click(function () {
                    $("input[name=xz]").prop("checked", this.checked)
                })

                $("#readerBody").on("click", $("input[name=xz]"), function () {
                    $("#qx").prop("checked", $("input[name=xz]").length === $("input[name=xz]:checked").length);
                })

                //为修改按钮绑定点击事件
                $("#editBtn").click(function () {
                    //获取已经选中的复选框
                    var $xz = $("input[name=xz]:checked");

                    if ($xz.length === 0) {
                        alert("请选择需要修改的线索记录");
                    } else if ($xz.length > 1) {
                        alert("一次只能修改一条记录");
                    } else {
                        var id = $xz.val();

                        window.location.href = "author/editReader.do?id=" + id;
                    }

                })


                //为删除按钮绑定事件,执行删除操作
                $("#deleteBtn").click(function () {

                    //找到复选框中所有挑勾的复选框的jquery
                    var $xz = $("input[name=xz]:checked");

                    if ($xz.length === 0) {
                        alert("请选择需要删除的记录");

                        //肯定选了,而且有可能是1条,有可能是多条
                    } else {

                        if (confirm("确定删除所选中的记录吗?")) {

                            //拼接参数
                            var param = "";

                            //将$xz中的每一个dom对象,取其value值,就相当于取得了需要删除的记录的id
                            for (var i = 0; i < $xz.length; i++) {
                                //$xz[i].value;
                                param += "id=" + $($xz[i]).val();

                                //如果不是最后一个元素,需要在后面追加一个&符号
                                if (i < $xz.length - 1) {
                                    param += "&";
                                }
                            }
                            //alert(param);
                            $.ajax({
                                url: "author/delete.do",
                                data: param,
                                type: "post",
                                dataType: "json",
                                success: function (data) {
                                    /*
										data:
											{"success":true/false}
									 */
                                    if (data) {
                                        //删除成功后
                                        //pageList(1, 2);
                                        //做完删除操作后,应该回到第一页,维持每页展现的记录数
                                        pageList(1, $("#readerPage").bs_pagination('getOption', 'rowsPerPage'));

                                    } else {
                                        alert("读者信息删除失败");
                                    }
                                }
                            })
                        }
                    }
                })


            });


            function pageList(pageNo, pageSize) {

                //将全选的复选框的勾干掉
                $("#qx").prop("checked", false);

                //查询前,将隐藏域中保存的信息取出来,重新赋予到搜索框中
                $("#readerUserName").val($.trim($("#hidden-readerUserName").val()));

                $.ajax({
                    url: "author/pageList.do",
                    data: {
                        "pageNo": pageNo,
                        "pageSize": pageSize,
                        "readerUserName": $.trim($("#readerUserName").val()),
                    },
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        var html = "";
                        $.each(data.dataList, function (i, n) {
                            html += '<tr>';
                            html += '<td><input type="checkbox" id="qx" name="xz" value="' + n.id + '"/></td>';
                            html += '<td>' + n.name + '</td>';
                            html += '<td>' + n.username + '</td>';
                            html += '<td>' + n.phone + '</td>';
                            html += '<td>' + n.signature + '</td>';
                            html += '<td>' + n.birth + '</td>';
                            html += '</tr>';
                        })

                        $("#readerBody").html(html);

                        //计算总页数
                        var totalPages = data.total % pageSize === 0 ? data.total / pageSize : parseInt(data.total / pageSize) + 1;

                        //数据处理完毕后,结合分页插件对前端展现分页相关的信息
                        $("#readerPage").bs_pagination({
                            currentPage: pageNo, // 页码
                            rowsPerPage: pageSize, // 每页显示的记录条数
                            maxRowsPerPage: 20, // 每页最多显示的记录条数
                            totalPages: totalPages, // 总页数
                            totalRows: data.total, // 总记录条数

                            visiblePageLinks: 3, // 显示几个卡片

                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            showRowsDefaultInfo: true,

                            //该回调函数是在,点击分页组件的时候触发的
                            //pageList方法调用的是自己写的方法,但是里面的参数,是分页插件提供的,不能碰
                            onChangePage: function (event, data) {
                                pageList(data.currentPage, data.rowsPerPage);
                            }
                        });

                    }
                })
            }
		</script>
	</head>
	<body class="container agm">


		<div id="nav-1">
			<ul class="nav">
				<li class="slide1"></li>
				<li class="slide2"></li>
				<li><a class="active" href="jsp/author/index.jsp">首页</a></li>
				<li><a href="jsp/setting/readerManage.jsp">读者管理模块</a></li>
				<li><a href="jsp/setting/novelManage.jsp">小说查询模块</a></li>
				<li><a href="login-a.html" class="iconfont icon-denglu" title="登陆"></a></li>
				<li><a href="jsp/author/register.html" class="iconfont icon-zhuce" title="注册"></a></li>
				<li><font style="color: #0f6674">${SESSION_USER.fullname}</font></li>
				<li><a href="author/loginOut.do" id="loginOutBtn">退出</a></li>
			</ul>
		</div>
		<h2>读者信息表单</h2>
		<input type="hidden" id="hidden-readerUserName">
		请输入查询的读者用户名:<input type="text" class="border" style="width: 400px;height: 40px;" id="readerUserName">
		<button type="button" class="btn btn-danger btn-sm" id="searchBtn">搜索</button>
		<div class="btn-toolbar" role="toolbar"
			 style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
			<div class="btn-group" style="position: relative; top: 18%;">
				<button type="button" class="btn btn-default" id="editBtn"><span
						class="glyphicon glyphicon-pencil"></span> 修改
				</button>
				<button type="button" class="btn btn-danger" id="deleteBtn">
					<span class="glyphicon glyphicon-minus"></span> 删除
				</button>
			</div>
		</div>
		<table class="table table-hover table-striped">
			<thead>
			<tr>
				<td><input type="checkbox" id="qx"/></td>
				<th>姓名</th>
				<th>用户名</th>
				<th>电话</th>
				<th>个性签名</th>
				<th>生日</th>
			</tr>
			</thead>
			<tbody id="readerBody">


			</tbody>
		</table>
		<div style="height: 50px; position: relative;top: 30px;">
			<div id="readerPage"></div>
		</div>

	</body>
</html>